import React from 'react';
import useUrlState from '../../utils/hooks/useUrlState';

export const UseUrlStateDemo = () => {
  const [param, setUrlParam] = useUrlState();
  const users = [
    {
      id: 1,
      name: '高修文',
    },
    {
      id: 2,
      name: '熊天成',
    },
    {
      id: 3,
      name: '郑华',
    },
    {
      id: 4,
      name: '王文静',
    },
  ];
  return (
    <form>
      <input
        type="text"
        value={param.name || ''}
        onChange={e => setUrlParam({ ...param, name: e.target.value })}
      />
      <select
        value={param.personId || ''}
        onChange={e => setUrlParam({ ...param, personId: e.target.value })}
      >
        <option value="">负责人</option>
        {users.map(user => (
          <option value={user.id} key={user.id}>
            {user.name}
          </option>
        ))}
      </select>
    </form>
  );
};
